<!-- 健康咨询 -->
<template>
  <div class="container Pd-T60">
    <!--标语-->
    <div class="title">
      <!--健康讲堂-->
      <div class="jkzx">
        <div class="floor_title_box">
          <i class="floor_title_icon Mg-R10"></i>
          <p class="floor_title Mg-R10">健康资讯</p>
        </div>
      </div>
    </div>
    <!--内容容器-->
    <div class="content">
      <!--健康资讯-->
      <div class="jkzx_content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="tab.title"
            :name="tab.title"
            v-for="(tab,index) in TabList"
            :key="index"
          >
            <div class="information_box">
              <div class="information_img"><img src="../../common/img/index/pic_jkzx.png" alt=""></div>
              <div class="information_info">
                <div class="information_title">关于papapa,你不知道的细节</div>
                <div class="information_text">
                  <span class="Ft-S16 Color_black Overflow3">在一个美好的晚上，当你准备和情侣大干一场的时候，心里是否会有某些担忧，让你没有办法好好享受这一夜春宵让你没有办法好好享受这一夜春宵在一个美好的晚上，当你准备和情侣大干一场的时候，心里是否会有某些担忧，让你没有办法好好享受这一夜春宵让你没有办法好好享受这一夜春宵</span>
                </div>
                <div class="information_btn Mg-T20">
                  <a href="javascript:void(0)" class="Ft-S16 Color_blue">【详情】</a>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <p class="Ft-S14 Color_gray6 more Mg-L40 jkzx_more">更多</p>
      </div>
      <!--今日热搜-->
      <div class="jrrs_content">
        <div class="jrrs_title">
          <div class="Ft-S18 Color_black">今日热搜</div>
          <p class="Ft-S14 Color_gray6 more Mg-L40 ">更多</p>
        </div>
        <div class="news_list">
          <ul>
            <li>
              <div class="news_info Overflow1 Ft-S14 Color_black">湿疹到底是怎么来的？为什么不能快速...</div>
              <div class="news_time Ft-S12 Color_grayA">2018-08-27</div>
            </li>
            <li>
              <div class="news_info Overflow1 Ft-S14 Color_black">湿疹到底是怎么来的？为什么不能快速...</div>
              <div class="news_time Ft-S12 Color_grayA">2018-08-27</div>
            </li>
            <li>
              <div class="news_info Overflow1 Ft-S14 Color_black">湿疹到底是怎么来的？为什么不能快速...</div>
              <div class="news_time Ft-S12 Color_grayA">2018-08-27</div>
            </li>
            <li>
              <div class="news_info Overflow1 Ft-S14 Color_black">湿疹到底是怎么来的？为什么不能快速...</div>
              <div class="news_time Ft-S12 Color_grayA">2018-08-27</div>
            </li>
            <li>
              <div class="news_info Overflow1 Ft-S14 Color_black">湿疹到底是怎么来的？为什么不能快速...</div>
              <div class="news_time Ft-S12 Color_grayA">2018-08-27</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--广告-->
    <div class="banner Mg-T60">
      <img src="../../common/img/index/pic_gg_banner.png" alt="">
    </div>
  </div>
</template>


<script>
  export default {
    name: 'Jkzx',
    data() {
      return {
        activeName: '健康科普',
        TabList: [
          {title: "健康科普"},
          {title: "男性健康"},
          {title: "女性健康"},
          {title: "心脑血管"},
        ]
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>
<style>
  .jkzx_content .el-tabs__active-bar {
    background: url("../../common/img/index/icon_jkkp.png") no-repeat;
    height: 5px;
    background-size: 100% 100%;
  }

  .jkzx_content .el-tabs__nav-wrap::after {
    height: 1px !important;
  }
  .el-tabs__header{
    margin-bottom: 0;
  }
</style>
<style scoped>
  .jkzx .floor_title_icon {
    background-image: url("../../common/img/index/floor_icon_jkzx.png");
  }

  /******内容容器******/
  .content {
    margin-top: 20px;
    display: flex;
    height: 320px;
  }

  /*健康资讯*/
  .jkzx_content {
    border-top: 2px solid rgba(159, 104, 240, 1);
    min-width: 800px;
    max-width: 800px;
    height: 100%;
    padding-top: 30px;
    position: relative;
  }

  .jkzx_more {
    position: absolute;
    right: 30px;
    top: 40px;
    display: inline-block;
  }

  .information_box {
    display: flex;
    padding-top: 30px;
    padding-right:30px;
  }

  .information_box .information_img {
    min-width: 320px;
    max-width: 320px;
    height: 200px;
    margin-right: 30px;
  }

  .information_box .information_img img {
    width: 100%;
    height: 100%;
  }
  .information_box .information_info{
    display: flex;
    flex-direction: column;
  }
  .information_box .information_info .information_title{
    font-size:18px;
    color:rgba(51,51,51,1);
    margin-bottom: 40px;
  }
  .information_box .information_info .information_text{
    line-height: 2;
  }
  .information_box .information_info .information_btn{
    text-align: right;
  }

  /*今日热搜*/
  .jrrs_content {
    border: 1px solid #e6e6e6;
    height: 100%;
    flex-grow: 1;
    padding: 30px;
  }

  .jrrs_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    height: 40px;
  }

  .news_list {
    padding-top: 30px;
  }

  .news_list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 3;
  }

  .news_list .news_info {
    width: 250px;
  }
  /********广告********/
  .banner{
    height:120px;
    width: 100%;
  }
  .banner img{
    width: 100%;
    height: 100%;
  }
</style>
